<template>
	<view>
		<xl-status-bar height="400rpx" background="https://xingluoedu.oss-cn-hangzhou.aliyuncs.com/index.png" zIndex="-1">
			<image class="logo" src="/static/imgs/logo.png"></image>
			<view class="index-title">XingLuo UI</view>
			<view class="sub-title">XingLuoUI 是一款轻量、全面的UniApp框架工具。</view>
			<image class="com" src="/static/imgs/bg/comp.png"></image>
		</xl-status-bar>
		<xl-tabs
			ref="tabs"
			class="tabs"
			:tabList="categories"
			:padding="0"
			type="cart"
			color="#ffffff"
			currentColor="#3dc6ff"
			background="#3dc6ff"
			switchType="swiper"
			:reduceHeight="595"
		>
			<template v-slot:tabBox="{item}">
				<view v-if="item.type === 1">
					<xl-list-item title="Icon 图标" url="icon" iconFamily="xl-uni" icon="xl-uni-icon" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Button 按钮" url="button" iconFamily="xl-uni" icon="xl-uni-button":iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Image 图片" url="image" iconFamily="xl-uni" icon="xl-uni-img" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Line 横竖线" url="line" iconFamily="xl-uni" icon="xl-uni-line" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Divider 分隔线" url="divider" iconFamily="xl-uni" icon="xl-uni-divider" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Empty 内容为空" url="empty" iconFamily="xl-uni" icon="xl-uni-empty" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Loading 加载" url="loading" iconFamily="xl-uni" icon="xl-uni-loading" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="CountTo数字滚动" url="countTo" iconFamily="xl-uni" icon="xl-uni-count-to" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Transition动画" url="transition" iconFamily="xl-uni" icon="xl-uni-transition" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Mask遮罩层" url="mask" iconFamily="xl-uni" icon="xl-uni-mask" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="BackTop返回顶部" url="backTop" iconFamily="xl-uni" icon="xl-uni-back-top" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Html解析组件" url="html" iconFamily="xl-uni" icon="xl-uni-back-top" :iconColor="iconColor" arrow></xl-list-item>
				</view>
				<view v-else-if="item.type == 2">
					<xl-list-item title="Input输入框" url="input" iconFamily="xl-uni" icon="xl-uni-input" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Calendar日期选择" url="calendar" iconFamily="xl-uni" icon="xl-uni-calendar" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Switch开关选择" url="switch" iconFamily="xl-uni" icon="xl-uni-switch" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Radio单选框" url="radio" iconFamily="xl-uni" icon="xl-uni-radio" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Checkbox单选框" url="checkbox" iconFamily="xl-uni" icon="xl-uni-checkbox" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Number数字框" url="number" iconFamily="xl-uni" icon="xl-uni-number" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Picker选择器" url="picker" iconFamily="xl-uni" icon="xl-uni-timepicker" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Starts星级评分" url="stars" iconFamily="xl-uni" icon="xl-uni-star" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="ImageUpload图片上传" url="imageUpload" iconFamily="xl-uni" icon="xl-uni-img" :iconColor="iconColor" arrow></xl-list-item>
				</view>
				<view v-else-if="item.type == 3">
					<xl-list-item title="Tabs标签" url="tabs" iconFamily="xl-uni" icon="xl-uni-tabs" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="ListItem列表项" url="list" iconFamily="xl-uni" icon="xl-uni-list" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Dropdown下拉菜单" url="dropdown" iconFamily="xl-uni" icon="xl-uni-dropdown" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Grid宫格列表" url="grid" iconFamily="xl-uni" icon="xl-uni-grid" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="ThreeBox列表" url="threeBox" iconFamily="xl-uni" icon="xl-uni-box" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="IndexList索引列表" url="indexList" iconFamily="xl-uni" icon="xl-uni-index-list" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="LoadRefresh加载刷新" url="loadRefresh" iconFamily="xl-uni" icon="xl-uni-loadmore" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Waterfall瀑布流" url="waterfall" iconFamily="xl-uni" icon="xl-uni-waterfall" :iconColor="iconColor" arrow></xl-list-item>
				</view>
				<view v-else-if="item.type == 4">
					<xl-list-item title="Tabbar导航栏" url="tabBar" iconFamily="xl-uni" icon="xl-uni-navbar" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Navbar导航栏" url="navbar" iconFamily="xl-uni" icon="xl-uni-navbar" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Search搜索框" url="search" iconFamily="xl-uni" icon="xl-uni-search" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Banner轮播图" url="banner" iconFamily="xl-uni" icon="xl-uni-banner" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="StatusBar状态栏" url="statusBar" iconFamily="xl-uni" icon="xl-uni-status-bar" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Popup弹出层" url="popup" iconFamily="xl-uni" icon="xl-uni-popup" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Dialog对话框" url="dialog" iconFamily="xl-uni" icon="xl-uni-dialog" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="CountDown倒计时" url="countDown" iconFamily="xl-uni" icon="xl-uni-count-down" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="ReadMore阅读更多" url="readMore" iconFamily="xl-uni" icon="xl-uni-zhankai" :iconColor="iconColor" arrow></xl-list-item>
					<xl-list-item title="Score综合评分" url="score" iconFamily="xl-uni" icon="xl-uni-score" :iconColor="iconColor" arrow></xl-list-item>
				</view>
			</template>
		</xl-tabs>
		<xl-tabbar></xl-tabbar>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, nextTick } from 'vue'
	
	const iconColor = ref('#3dc6ff')
	
	const categories = [
		{name: '基础组件', type: 1}, 
		{name: '表单组件', type: 2}, 
		{name: '列表组件', type: 3}, 
		{name: '工具组件', type: 4}
	]
	
	onMounted(()=>{
		uni.$xl.store.user.token = "abcde"
		uni.$xl.store.user.userInfo = {a:2,b:2,c:3}
		console.log(uni.$xl.store.user.userInfo);
		uni.$xl.store.app.city = "龙岩"
		console.log(uni.$xl.store.app.city);
		// uni.$xl.store.user.userInfo = null
		
		// uni.$xl.apis.getCaptchaImage().then(res => {
		// 	console.log(res);
		// }).catch(err => {
		// 	console.log(err);
		// })
		
		console.log(uni.$xl.os());
	})
	
	
</script>

<style lang="scss" scoped>
	.logo{
		margin: 80upx 0 0 50upx;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.index-title{
		margin: 10upx 0 0 50upx;
		color: #2fb2f7;
		font-size: 38upx;
		font-weight: bold;
		font-style: italic;
		text-shadow: 2px 2px 2px #a3daf7;
	}
	.sub-title{
		margin: 20upx 0 0 50upx;
		font-size: 24upx;
		font-weight: bold;
		width: 400upx;
		color: #3dc4fd;
	}
	.com{
		position: absolute;
		bottom: 35upx;
		right: 0upx;
		width: 420upx;
		height: 320upx;
	}
	.tabs{
		position: relative;
		top: -8px;
	}
</style>
